/*
 * @Author: your name
 * @Date: 2021-01-14 11:32:50
 * @LastEditTime: 2021-01-14 16:49:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \carlist\src\components\Loading\index.js
 */
import React,{Component} from "react";
import Bscroll from "better-scroll";

export default class MyLoading extends Component{
      // 如果是涉及到dom操作的插件什么时间去实例化;
      componentDidMount(){
          this.scroll = new Bscroll('.'+this.props.myclass,{
              pullUpLoad:true,
              click:true,
              scrollY:true
          })
          //上拉请求数据加载更多  ----先不写;
         this.scrllLoading({y:-5});
          //滚动的时候除非
          this.scroll.on('scroll',this.scrllLoading)
      }
      //滚动到对应的位置
      scrollToFn(index){
          let itemlist = [...this.scrollBox.querySelectorAll('.item')]
          this.scroll.scrollTo(0,-itemlist[index].offsetTop,500)
      }
      shouldComponentUpdate(nextProps){
          //如果楼层点击传参的不一样;
          if(nextProps.ind!==this.props.ind){
              this.scrollToFn(nextProps.ind-1);
          }
          return true
      }
      scrllLoading=position=>{
          //先获取真正的图片;
          let imgList = [...this.scrollBox.querySelectorAll('img')];
          if(!imgList.length){
              //滚动到初始位置
              this.scroll.scrollTo(0,-5);
              return;
          }
          //imgList
        //   <img src="loading图片" data-src="真正的图片的地址"></img>
          imgList.forEach(v=>{
              let imgOrigin = v.dataset.src;

              //下面就是----判断滚动高度了;
              if(this.scrollBox.clientHeight-position.y>=v.offsetTop){
                  v.src = imgOrigin;
              }
          })
      }

      render(){
          return (
              <div className={this.props.myclass} ref={(aa)=>this.scrollBox=aa}>
                   {this.props.children}
              </div>
          )
      }
}